<template>
	<view class="expert-science">
		<!-- Expert Team Section -->
		<view class="section">
			<h2 class="section-title">专家团队</h2>
			<view class="expert-grid">
				<view v-for="(expert, index) in experts" :key="index" class="expert-card">
					<img :src="expert.picUrl | avatarUrlFind('1')" :alt="expert.name" class="expert-image" @click="goExpertDetail(expert)">
				</view>
			</view>
		</view>

		<!-- Team Introduction Section -->
		<view class="section">
			<h2 class="section-title">瑞隆安集团简介</h2>
			<view class="intro-container">
				<view class="video-container">
					<video :src="synopsisList[0].videoUrl" class="intro-video" show-center-play-btn enable-play-gesture
						show-fullscreen-btn :controls="true"></video>
				</view>
				<view class="text-container">
					<p class="intro-text">{{ synopsisList[0].remark }}</p>
				</view>
			</view>
		</view>

		<!-- Health Science Articles Section -->
		<view class="section">
			<h2 class="section-title">健康科普</h2>
			<scroller @init="initScroller" @down="refreshData" @up="listInformation" :up="optUp" :fixed="false">
				<view class="articles-list">
					<view v-for="(article, index) in articles" :key="index" class="article-card"
						@click="goScienceDetail(article)">
						<img :src="article.image | avatarUrlFind('1')" :alt="article.title" class="article-image">
						<view class="article-content">
							<h3>{{ article.title }}</h3>
							<view class="article-meta">
								<p class="article-author">{{ article.author }}</p>
								<p class="article-date">{{ article.newDate }}</p>
							</view>
						</view>
					</view>
				</view>
			</scroller>
		</view>
	</view>
</template>

<script>
	import scroller from '@/components/scroller/scroller.vue';
	import {
		getAppExpertScienceList
	} from '@/api/expertScience.js'

	import {
		listInformation
	} from '@/api/news.js'

	export default {
		components: {
			scroller
		},
		data() {
			return {
				experts: [],
				synopsisList: [],
				scroller: {},
				optUp: {
					onScroll: true, //监听滚动事件
					page: {
						size: 5
					} //下拉加载15条
				},
				queryParams: {},
				articles: []
			}
		},
		created() {
			this.getAppExpertScienceList()
			// this.listInformation()
		},
		methods: {

			/*初始化滚动*/
			initScroller(scroller) {
				this.scroller = scroller;
			},
			/*刷新数据*/
			refreshData() {
				this.loadData()
			},
			/*加载数据*/
			loadData() {
				this.articles = [];
				this.scroller.resetUpScroll();
			},

			goExpertDetail(expert) {
				// uni.navigateTo({
				// 	url: `/subPackage_1/pages/expertScience/expert-detail?expert=${JSON.stringify(expert)}`
				// })
				this.$tab.navigateTo('/subPackage_1/pages/expertScience/expert-detail?expert=' + encodeURIComponent(JSON
					.stringify(expert)))
			},
			goScienceDetail(article) {
				this.$tab.navigateTo('/subPackage_1/pages/expertScience/science-detail?article=' + encodeURIComponent(JSON
					.stringify(article)))
			},

			getAppExpertScienceList() {
				getAppExpertScienceList().then(res => {
					this.experts = res.data.teamList
					this.synopsisList = res.data.synopsisList
				})
			},

			async listInformation() {
				this.queryParams.pageNum = this.scroller.num
				this.queryParams.pageSize = this.scroller.size
				this.queryParams.isShow = '1'
				const {
					rows,
					total
				} = await listInformation(this.queryParams)
				console.log('------新闻列表------', rows)
				this.articles = this.articles.concat(rows);
				this.$forceUpdate();
				this.scroller.endBySize(rows.length, total);
				uni.stopPullDownRefresh();
				uni.hideLoading();
			}

		}
	}
</script>

<style scoped>
	.expert-science {
		padding: 12px;
		padding-bottom: 70px;
		background-color: white;
		padding-top: 40px;
	}

	.section {
		/* margin-bottom: 30px; */
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
	}

	.section-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 15px;
		position: relative;
		z-index: 10;
		color: #333;
	}

	.section-title::after {
		content: '';
		position: absolute;
		left: -10px;
		bottom: -5px;
		width: 120px;
		height: 30px;
		background-image: url('https://www.ruilongan.com/profile/upload/2025/06/27/路径@2x_20250627113158A059.png');
		background-size: contain;
		background-position: left bottom;
		background-repeat: no-repeat;
		z-index: -1;
	}

	/* Expert Team Styles */
	.expert-grid {
		display: flex;
		overflow-x: auto;
		gap: 4px;
		padding: 5px;
		padding-top: 40px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* Firefox */
		border: 1px solid #eee;
		border-radius: 8px;
		background-color: #fff;
		position: relative;
		height: 170px;
	}

	.expert-grid::-webkit-scrollbar {
		display: none;
		/* Chrome, Safari */
	}

	.expert-card {
		text-align: center;
		flex: 0 0 114px;
		/* Fixed width for each card */
		width: 130px;
		position: relative;
	}

	.expert-image {
		width: 110px;
		height: 155px;
		border-radius: 8px;
		/* margin-bottom: 10px; */
		object-fit: cover;
		position: absolute;
		top: -35px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
	}

	.expert-info h3 {
		font-size: 16px;
		margin-bottom: 5px;
	}

	.expert-info p {
		font-size: 12px;
		color: #666;
	}

	/* Team Introduction Styles */
	.intro-container {
		margin-top: 15px;
		display: flex;
		flex-direction: column;
		gap: 10px;
		/* border: 1px solid #eee; */
		border-radius: 8px;
		background-color: #fff;
		padding: 4px;
	}

	.video-container {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.text-container {
		width: 100%;
	}

	.intro-video {
		width: 100%;
		height: 200px;
		border-radius: 8px;
	}

	.intro-text {
		font-size: 14px;
		line-height: 1.6;
		color: #333;
		padding: 0 8px 8px 8px;
	}

	/* Articles Styles */
	.article-card {
		display: flex;
		padding: 10px;
		border: 1px solid #eee;
		border-radius: 8px;
		background-color: #fff;
		margin-bottom: 10px;
	}

	.article-card:last-child {
		margin-bottom: 0;
		border-bottom: 1px solid #eee;
	}

	.article-image {
		width: 100px;
		height: 100px;
		border-radius: 8px;
		margin-right: 15px;
	}

	.article-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.article-content h3 {
		font-size: 16px;
		margin-bottom: 0;
	}

	.article-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: auto;
	}

	.article-author {
		font-size: 12px;
		color: #666;
	}

	.article-date {
		font-size: 12px;
		color: #999;
	}

	/* Bottom Navigation */
	.bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		padding: 10px 0;
		border-top: 1px solid #eee;
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 12px;
		color: #666;
	}

	.nav-item.active {
		color: #007aff;
	}

	.nav-item i {
		font-size: 20px;
		margin-bottom: 4px;
	}
</style>